<template>
  <div class="table-ctrl-body">
    <!--按钮组-->
    <div class="Btns-ctrl-body">
      <div class="btns f-l">
        <span>Topic：</span>
        <select class="btn-select" @change="selectFn">
          <option v-for="item in selectList" :value="item.value">{{item.key}}</option>
        </select>
      </div>
      <!--高级搜索-->
      <SearchPublic
        :searchObj="searchObj"
        @searchShow="searchShowFn"
        @searchParams="searchParamsFn"
      ></SearchPublic>
      <div class="btns f-r">
        <button type="button" class="btn btn-warning" @click="toggleUploadeModal('detail')">详情</button>
      </div>
    </div>
    <!--按钮组闭合-->
    <!--表格组-->
    <div class="table-ctrl">
      <!--表格头-->
      <!--{{treeTableRow}}-->
      <div class="table-header">
        <table class="table-default">
          <thead>
          <tr>
            <th v-for="ths in tableHeader">
              {{ths.value}}
            </th>
          </tr>
          </thead>
        </table>
      </div>
      <!--表格中部-->
      <div class="table-overflowX">
        <table class="table-default">
          <tbody>
          <tr
            v-for="(trs,index) in tableRow.list"
            @dblclick="toggleUploadeModal('detail')"
            @click="selectRow(trs,index)"
            :class="{active: index === isActive}"
          >
            <td v-for="tds in tableHeader" :title="trs[tds.key]">
              {{trs[tds.key] | contentFilter(tds.key)}}
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <!--表格翻页-->
      <Pages
        v-show="tableRow.total !== 0"
        v-if="tableRow"
        :showItem="10"
        :pageSize="Number(tableRowParams.pageSize)"
        :allDataSum="tableRow.total"
        :allpage="(Math.ceil(tableRow.total/tableRowParams.pageSize))"
        @current-change="tablePageData"
      ></Pages>
      <detailKafka :detailKafkaObj="detailKafkaObj"
                   @closeModal="closedetailKafka"></detailKafka>
    </div>
  </div>
</template>

<script>
  import Pages from "../../sudoku/atom/pages"
  import SearchPublic from "../refreshSearch/refrashSearch"
  import detailKafka from "./detailKafka"
  export default {
    name: "kafkaDataAccessSituation",
    data(){
      return{
        projectCode: '',
        detailKafkaObj: {
          isShow: false,
          id: '',
          topic: ''
        },
        isActive:-1,
        selectRowId:"",
        tableHeader:[
          {"key":"topic","value":"Topic名称"},
          {"key":"content","value":"数据内容"},
          {"key":"accessMode","value":"接入类型"},
          {"key":"createTime","value":"接入时间"},
          {"key":"status","value":"数据状态"}
        ],
        tableRow: {
          list: [],
          total: 0
        },
        tableRowParams : {
          pageIndex:"1", //当前页
          pageSize:"20", //数量
        },
        selectList: [],
        selectBtnId: '',
        searchObj:{
          condition:[
            {"title":"数据内容","key":"name",'type':'text',"value":'','data':''},
            {"title":"开始时间","key":"name",'type':'startTime',"value":'','data':''},
            {"title":"结束时间","key":"name",'type':'endTime',"value":'','data':''},
          ],
          htmlType:"searchTime",
        },
      }
    },
    components:{
      Pages,
      SearchPublic,
      detailKafka
    },
    created(){

    },
    mounted(){
      this.getSelectList()
    },
    methods:{
      // 下拉选择
      selectFn (ele) {
        this.selectBtnId = ele.target.value
        this.searchObj.condition[0].value = ''
        this.searchObj.condition[1].value = ''
        this.searchObj.condition[2].value = ''
        this.tableRowAjax()
        console.log(this.selectBtnId);
      },
      // 获取选择的数据
      getSelectList () {
        const self = this
        if(self.projectCode.length <= 0) {
          self.getType('projectCode').then(item => {
            self.getSelectList()
          })
        } else {
          let _url = this.Beacon + '/mongoResult/getHHTopicEnum?projectCode=' + this.projectCode
          return this.$axios.get(_url)
            .then(res =>{
              //console.log(data);
              let _list = []
              for (let key in res.data.content) {
                _list.push({
                  key: res.data.content[key],
                  value: key
                })
              }
              self.selectList = _list
              self.selectBtnId = _list[0].value
              self.tableRowAjax ()
            })
            .catch((err)=>{
              console.log(err, '选择数据');
            })
        }
      },
      //加载表格
      tableRowAjax(){
        // 清除选择
        this.clearSelect();
        this.s_loading(true)
        if(this.selectList.length <= 0) {
          this.getSelectList().then(item => {
            this.tableRowRealAjax ()
          })
        } else {
          this.tableRowRealAjax ()
        }
      },
      tableRowRealAjax () {
        let _url = this.Beacon +
          '/mongoResult/getDataByTopic?topic=' +
          this.selectBtnId +
          '&startDate=' + this.searchObj.condition[1].value +
          '&endDate=' + this.searchObj.condition[2].value +
          '&condition='+ this.searchObj.condition[0].value
        let data = {
          current: this.tableRowParams.pageIndex,
          size: this.tableRowParams.pageSize,
        }
        this.$axios.post(_url, data)
          .then(res =>{
            this.tableRow.list = res.data.content.records;
            this.tableRow.total = res.data.content.total;
            this.s_loading(false)
          })
          .catch((err)=>{
            this.s_loading(false)
            this.s_alert('列表数据加载错误')
            //console.log(err);
          })
      },
      //翻页加载
      tablePageData(page){
        this.tableRowParams.pageIndex = page
        this.tableRowAjax();
        //console.log(page);
      },
      //新增弹窗显示与隐藏
      toggleAddModal(){
        this.addModalObj.isShow = !this.addModalObj.isShow;
        if( this.addModalObj.isShow === false ){
          //重新加载表格
          this.tableRowAjax();
        }
      },
      //修改弹窗显示与隐藏
      toggleUploadeModal(str){
        if( this.selectRowId !=="" ){
          this.detailKafkaObj.isShow = !this.detailKafkaObj.isShow;
          this.detailKafkaObj.type = str;
        }else{
          this.s_alert("请选择需要查看的Topic！");
          return
        }
        if( this.detailKafkaObj.isShow === false ){
          //重新加载表格
          this.tableRowAjax();
        }
      },
      //选择行
      selectRow(obj,index){
        this.detailKafkaObj.id = obj.id;
        this.detailKafkaObj.topic = obj.topic;
        this.selectRowId = obj.transactionName;
        this.isActive = index;
      },
      //清除选择
      clearSelect(){
        this.isActive = -1;
        this.selectRowId = "";
      },
      // 关闭详情
      closedetailKafka () {
        this.detailKafkaObj.isShow = false
        this.clearSelect()
      },
      //搜索
      searchParamsFn(searchParams){
        this.tableRowAjax();
      },
      searchShowFn () {

      },
      // 获取对比类型
      getType (str) {
        return this.$axios({
          url: this.Dictionary + "/tag/detail/type/" + str + "/key/" + str,
          method: 'get'
        }).then(res => {
          let data = []
          res.data.objs.map(item => {
            data.push({
              key: item.name,
              value: item.code,
              description: item.description
            })
          })
          this.projectCode = data[0].key
        }).catch(err => {
          console.log(err, '获取' + str)
        })
      },
    },
    filters: {
      contentFilter (val,key) {
        if (key == 'status'&& val) {
          return '正常'
        } else if (key == 'status'&& !val) {
          return '异常'
        } else {
          return val
        }
      }
    }
  }
</script>

<style scoped>

</style>
